<template>
  <view>
    <!-- 导航条 -->
    <view class="cu-custom" :style="{ height: $wanlshop.wanlsys().height + 'px' }">
      <view
        class="cu-bar bg-bgcolor fixed"
        :style="{ height: $wanlshop.wanlsys().height + 'px', paddingTop: $wanlshop.wanlsys().top + 'px' }"
      >
        <view class="action" @tap="$wanlshop.back(1)">
          <text class="wlIcon-fanhui1"></text>
        </view>
        <view class="content" :style="{ top: $wanlshop.wanlsys().top + 'px' }"> 申请入驻 </view>
        <view class="action" @tap="$wanlshop.to('/pages/user/service')">
          <text class="wlIcon-kefu"></text>
        </view>
      </view>
    </view>
    <form @submit="formSubmit">
      <view class="cu-form-group">
        <view class="title">店铺类型</view>
        <picker @change="PickerChange" :value="shopdata.state" :range="state_text">
          <view class="picker">
            {{ state_text[shopdata.state] }}
          </view>
        </picker>
      </view>
      <view class="cu-form-group">
        <view class="title">{{ name_text[shopdata.state] }}</view>
        <input name="name" v-model="shopdata.name" :placeholder="'请输入' + name_text[shopdata.state]" />
      </view>
      <view class="cu-form-group margin-bottom-bj">
        <view class="title">{{ number_text[shopdata.state] }}</view>
        <input name="number" v-model="shopdata.number" :placeholder="'请输入' + number_text[shopdata.state]" />
      </view>
      <!-- <view class="cu-form-group margin-top-bj" :class="shopdata.state == 2 ? '':'margin-bottom-bj'">
				<view class="title">{{image_text[shopdata.state]}}</view>
				<input name="image" v-model="shopdata.image" :placeholder="'点击上传'+image_text[shopdata.state]" disabled
					@tap="chooseImg('image')"></input>
				<view class="cu-avatar radius" v-if="shopdata.image" @tap="previewImage(0)">
					<image :src="$wanlshop.oss(shopdata.image, 32, 0, 1)" mode="widthFix"></image>
				</view>
			</view>
			 -->

      <view
        class="cu-form-group"
        v-for="(item, index) in shopdata.image"
        :key="item"
        :class="shopdata.state == 2 ? '' : ''"
      >
        <view class="title" v-if="index == 0">{{ image_text[shopdata.state] }}</view>
        <view class="title" v-else-if="shopdata.state == 0">
          {{ index == 1 ? '身份证正面' : index == 2 ? '身份证反面' : '其他资质' }}
        </view>
        <view class="title" v-else-if="shopdata.state != 0">
          {{ index == 1 ? '手持身份证' : index == 2 ? '身份证正面' : index == 3 ? '身份证反面' : '其他资质' }}
        </view>
        <view class="title" v-else> 其他资质 </view>
        <!-- {{shopdata.image.length   }}  {{  shopdata.state   }}  -->
        <input
          name="image"
          v-model="shopdata.image[index]"
          :placeholder="'点击上传' + (index == 0 ? image_text[shopdata.state] : '其他资质')"
          disabled
          @tap="chooseImg('image', index)"
        />
        <view class="cu-avatar radius" v-if="shopdata.image[index]" @tap="previewImage(index)">
          <image :src="$wanlshop.oss(shopdata.image[index], 32, 0, 1)" mode="widthFix"></image>
        </view>
      </view>

      <!-- <view class="cu-form-group "   :class="shopdata.state == 2 ? '':''">
				<view class="title"  > {{ shopdata.image.length == 1 ?'身份证正反面':'其他资质' }} </view>
				<input name="image" v-model="shopdata.image[shopdata.image.length]" :placeholder="'点击上传'+ '' + '其他资质'" disabled
					@tap="chooseImg('image' , shopdata.image.length)"></input>
				<view class="cu-avatar radius" v-if="shopdata.image[shopdata.image.length]" @tap="previewImage(shopdata.image.length)">
					<image :src="$wanlshop.oss(shopdata.image[shopdata.image.length], 32, 0, 1)" mode="widthFix"></image>
				</view>
			</view>
			 -->

      <view class="margin-bottom-bj"> </view>

      <view class="cu-form-group margin-bottom-bj" v-if="shopdata.state == 2">
        <view class="title">商标证书</view>
        <input
          name="trademark"
          v-model="shopdata.trademark"
          placeholder="点击上传商标证书"
          disabled
          @tap="chooseImg('trademark')"
        />
        <view class="cu-avatar radius" v-if="shopdata.trademark" @tap="previewImage(1)">
          <image :src="$wanlshop.oss(shopdata.trademark, 32, 0, 1)" mode="widthFix"></image>
        </view>
      </view>

      <view class="cu-form-group">
        <view class="title">微信号</view>
        <input name="wechat" v-model="shopdata.wechat" placeholder="请输入微信号" />
        <text class="wlIcon-WeChat text-green"></text>
      </view>

      <view class="cu-form-group">
        <view class="title">联系方式</view>
        <input name="mobile" v-model="shopdata.mobile" maxlength="11" type="number" placeholder="请输入手机号" />
      </view>

      <!-- ----------------------------------------------- -->

      <view class="cu-form-group margin-top-bj">
        <view class="title">店铺名</view>
        <input name="shopname" v-model="shopdata.shopname" placeholder="请输入店铺名" />
      </view>
      <view class="cu-form-group">
        <view class="title">店铺图标 </view>
        <input
          name="avatar"
          v-model="shopdata.avatar"
          :placeholder="'点击上传店铺图标'"
          disabled
          @tap="chooseImg('avatar')"
        />
        <view class="cu-avatar radius" v-if="shopdata.avatar" @tap="previewImage(2)">
          <image :src="$wanlshop.oss(shopdata.avatar, 32, 0, 1)" mode="widthFix"></image>
        </view>
      </view>
      <view class="cu-form-group">
        <view class="title">店铺简介</view>
        <input name="bio" v-model="shopdata.bio" placeholder="请输入店铺简介" />
      </view>
      <view class="cu-form-group">
        <view class="title">经营地址</view>
        <input
          name="city"
          disabled
          placeholder="请选择经营地址"
          @tap="$refs.wanlAddress.show()"
          :value="shopdata.city"
        />
      </view>
      <view class="cu-form-group">
        <view class="title">详细地址:</view>
        <input name="shopAddress" v-model="shopdata.shopAddress" placeholder="请输入店铺详细地址" />
      </view>

      <view class="cu-form-group">
        <view class="title">店铺介绍:</view>
        <input name="content" v-model="shopdata.content" placeholder="请输入店铺介绍" />
      </view>
      <!-- 同意服务条款 -->
      <checkbox-group :class="!checked ? 'shake-horizontal' : ''" class="auth-clause" @change="CheckboxChange">
        <checkbox class="orange" :class="checked ? 'checked' : ''" :checked="checked" value="1" />
        <view>
          我已阅读并同意
          <text @tap="onDetails($store.state.common.appConfig.shop_enter, '商家入驻协议')"> 商家入驻协议 </text>
        </view>
      </checkbox-group>
      <!-- ----------------------------------------------- -->

      <view class="" style="height: 200rpx"> </view>

      <view class="edgeInsetBottom"></view>
      <view class="wanlian cu-bar tabbar foot flex flex-direction">
        <button form-type="submit" :disabled="shopdata.verify == 3" class="cu-btn wanl-bg-orange lg">
          {{ verify_text[shopdata.verify] }} {{ shopdata.pay_status == 1 ? '已支付' : '未支付' }}
        </button>
      </view>
    </form>

    <wanl-address ref="wanlAddress" @selectAddress="successSelectAddress"></wanl-address>
  </view>
</template>

<script>
import graceChecker from '@/common/graceChecker';
export default {
  data() {
    return {
      state_text: ['个人', '企业', '旗舰店'],
      name_text: ['姓名', '企业名称', '企业名称'],
      number_text: ['身份证号码', '统一信用代码', '统一信用代码'],
      image_text: ['手持身份证', '营业执照', '店铺图标'], //店铺图标
      verify_text: ['立即入驻', '已申请 修改', '入驻审核中', '已入驻不可操作', '未通过审核', '已修改成功'],
      shopdata: {
        state: 0,
        verify: 0,
        image: [],
        trademark: '',

        shopname: '', //店鋪名称
        avatar: '', //店铺图标
        bio: '', // 简介
        city: '', //经营地址
        content: '', // 介绍
        shopAddress: '',
      },

      addressData: {
        name: '',
        mobile: '',
        default: 0,
        //地区
        country: '', // 国家
        province: '', //省份
        city: '', // 城市
        citycode: '', // 城市代码
        district: '', // 县
        adcode: '', // 地区代码
        formatted_address: '', //详细地区
        //详情
        address: '', //详细地址
        address_name: '', // 地址名称
        location: '', //经纬度
      },
      checked: false,
    };
  },
  onLoad(option) {
    let data = JSON.parse(option.data);

    console.log('data ========>', data);
    if (data.id) {
      delete data.deletetime;

      data.image = data?.image.split(',') || [];
      data.image.push('');

      this.shopdata = data;
    } else {
      this.shopdata.image.push('');
    }
  },
  methods: {
    CheckboxChange(e) {
      // eslint-disable-next-line no-debugger
      debugger;
      this.checked = !!e.detail.value[0];
    },
    PickerChange(e) {
      this.shopdata.state = e.detail.value;
      this.shopdata.image = [''];
      this.shopdata.name = '';
      this.shopdata.number = '';
    },
    successSelectAddress(address) {
      this.addressData.country = address.country;
      this.addressData.province = address.province;
      this.addressData.city = address.city;
      this.addressData.citycode = address.citycode;
      this.addressData.district = address.district;
      this.addressData.formatted_address = address.formatted_address;
      // this.addressData.location = address.location;
      // this.addressData.adcode = address.adcode;
      // this.addressList.location = address.location;
      // this.addressList.adcode = address.adcode;

      // 经营地址
      this.shopdata.city = address.province + '/' + address.city + '/' + address.district;
      // console.log(' ========>',address);
    },

    // 提交申请
    formSubmit(e) {
      // verify:0=提交资质,1=提交店铺,2=提交审核,3=通过,4=未通过
      if (this.shopdata.verify != 3) {
        this.wanlChecker(e);
      } else {
        this.$wanlshop.msg('已成功入驻，不可修改再修改申请信息');
      }
    },
    async wanlChecker(e) {
      if (!this.checked) {
        uni.showToast({
          title: '请阅读并同意商家入驻协议',
          icon: 'none',
        });
        return;
      }
      //定义表单规则
      let rule = [
        {
          name: 'name',
          checkType: 'notnull',
          errorMsg: '请输入' + this.name_text[this.shopdata.state],
        },
        {
          name: 'number',
          checkType: 'notnull',
          errorMsg: '请输入' + this.number_text[this.shopdata.state],
        },
        // {
        // 	name: 'image',
        // 	checkType: 'notnull',
        // 	errorMsg: '请上传' + this.image_text[this.shopdata.state]
        // },
        // {name: 'trademark', checkType: 'notnull', errorMsg: '请上传商标证书'},
        {
          name: 'wechat',
          checkType: 'notnull',
          errorMsg: '请输入微信号',
        },
        {
          name: 'mobile',
          checkType: 'phoneno',
          errorMsg: '请输入正确的手机号',
        },

        // -------------------------------------------------------------------------keke
        {
          name: 'shopname',
          checkType: 'notnull',
          errorMsg: '请输入店铺名',
        },
        {
          name: 'avatar',
          checkType: 'notnull',
          errorMsg: '请上传' + this.image_text[this.shopdata.state],
        },
        {
          name: 'bio',
          checkType: 'notnull',
          errorMsg: '请输入店铺简介',
        },
        {
          name: 'city',
          checkType: 'notnull',
          errorMsg: '请选择经营地址',
        },
        {
          name: 'shopAddress',
          checkType: 'notnull',
          errorMsg: '请输入店铺地址',
        },
        {
          name: 'content',
          checkType: 'notnull',
          errorMsg: '请填写店铺简介',
        },
      ];
      if (this.shopdata.image.length <= 1) {
        uni.showToast({
          title: '请上传' + this.image_text[this.shopdata.state],
          icon: 'none',
        });
        return;
      }
      if (this.shopdata.image.length < 3 && this.shopdata.state != 0) {
        uni.showToast({
          title: '请上传手持身份证',
          icon: 'none',
        });
        return;
      }
      if (
        (this.shopdata.image.length < 3 && this.shopdata.state == 0) ||
        (this.shopdata.image.length < 4 && this.shopdata.state != 0)
      ) {
        uni.showToast({
          title: '请上传身份证正面',
          icon: 'none',
        });
        return;
      }
      if (
        (this.shopdata.image.length <= 3 && this.shopdata.state == 0) ||
        (this.shopdata.image.length < 5 && this.shopdata.state != 0)
      ) {
        uni.showToast({
          title: '请上传身份证反面',
          icon: 'none',
        });
        return;
      }

      //进行表单检查
      let formData = e.detail.value;
      let checkRes = graceChecker.check(formData, rule);
      if (checkRes) {
        let shopdata = JSON.parse(JSON.stringify(this.shopdata));

        shopdata.image = shopdata.image.filter(function (s) {
          return s && s.trim();
        });

        shopdata.image = shopdata.image.toString();
        this.$api.post({
          url: '/wanlshop/shop/apply',
          data: shopdata,
          success: res => {
            res.image = res?.image?.split(',') || [];
            // this.shopdata = res ;
            res.image.push('');
            this.$set(this, 'shopdata', res);

            if (shopdata.verify == 0) {
              shopdata.verify = 2;
              // this.$wanlshop.msg('提交成功，平台将于7个工作日内与您联系');
              // console.log(' ========>',res);
              if (this.shopdata.pay_status != 1) {
                this.$wanlshop.auth(`/pages/user/money/pay?order_id=${res.order_id}&money=${res.money}&apply=1`);
              }
            } else {
              shopdata.verify = 5;
              this.$wanlshop.msg('修改成功！');

              if (this.shopdata.pay_status != 1) {
                this.$wanlshop.auth(`/pages/user/money/pay?order_id=${res.order_id}&money=${res.money}&apply=1`);
              }
            }
          },
        });
      } else {
        this.$wanlshop.msg(graceChecker.error);
      }
    },
    // 选择图片
    chooseImg(name, index) {
      uni.chooseImage({
        sourceType: ['camera', 'album'],
        sizeType: 'compressed',
        count: 1,
        success: res => {
          this.$api.get({
            url: '/wanlshop/common/uploadData',
            success: updata => {
              this.$api.upload({
                url: updata.uploadurl,
                filePath: res.tempFilePaths[0],
                name: 'file',
                formData: updata.storage == 'local' ? null : updata.multipart,
                success: data => {
                  if (name == 'image') {
                    if (index == this.shopdata.image.length - 1) {
                      this.shopdata.image.splice(index, 0, data.fullurl);
                    } else {
                      this.$set(this.shopdata.image, index, data.fullurl);
                    }
                  } else {
                    this.shopdata[name] = data.fullurl;
                  }
                },
              });
            },
          });
        },
      });
    },
    //预览图片
    previewImage(key) {
      let urls = [];
      let shopdata = this.shopdata;
      if (shopdata.state == 2) {
        urls = [this.$wanlshop.oss(shopdata.image[key], 320, 0, 1), this.$wanlshop.oss(shopdata.trademark, 320, 0, 1)];
      } else {
        urls = [this.$wanlshop.oss(shopdata.image[key], 320, 0, 1)];
      }
      uni.previewImage({
        urls: urls,
        current: urls[key],
        indicator: 'number',
      });
    },
  },
};
</script>

<style>
.cu-btn[disabled] {
  opacity: 1;
  color: #ffffff;
  background: #fe660059;
}

.wanlian.cu-bar.tabbar {
  background-color: transparent;
}

.wanlian.cu-bar.tabbar .cu-btn {
  width: calc(100% - 50rpx);
}

.wanlian.cu-bar.tabbar .cu-btn.lg {
  font-size: 32rpx;
  height: 86rpx;
}

.cu-form-group .title,
.cu-form-group uni-input {
  font-size: 28rpx;
}

.cu-avatar image {
  width: 64rpx;
  height: 64rpx;
}

.auth-clause {
  display: flex;
  align-items: center;
  font-size: 25rpx;
  color: #909090;
  margin-left: 10px;
  margin-top: 10px;
}

.shake-horizontal {
  animation-name: shake-horizontal;
  animation-duration: 100ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-delay: 0s;
  animation-play-state: running;
}

.auth-clause checkbox {
  margin-right: 6rpx;
  transform: scale(0.7);
}

.auth-clause text {
  margin: 0 10rpx;
  color: #ed6d0f;
}
</style>
